<template>
	<navigatorComp title="回忆相册" bgcColor="#121512" fontColor="#fff">
		<!-- <template #rightWrap>
			<view class="edit" @click="changeStatus" v-if="isSelf">
				{{ isEdit ? '完成' : '编辑' }}
			</view>
		</template> -->
	</navigatorComp>

	<div class="content">
		<view class="display_flex" style="margin-top: 32rpx" v-if="isSelf">
			<view class="uploadImage" @click="uploadAImg">
				<image src="http://112.124.50.179:8888/imgs/home/image.png" mode=""></image>
				<text>上传照片</text>
			</view>
			<view class="edit_box" @click="changeStatus">{{ isEdit ? '完成' : '编辑' }}</view>
		</view>

		<!-- 预览图片 -->
		<view v-if="!isEdit" class="album">
			<u-album
				keyName="img"
				maxCount="99999"
				:urls="img_list"
				multipleSize="216rpx"
				imageMode="aspectFill"
			></u-album>
		</view>

		<!-- 上传图片 -->
		<view v-else class="upload">
			<view v-for="(item, index) in img_list" :key="index">
				<image class="upload_img" :src="item.img" mode=""></image>
				<image
					@click="close(item.photoId)"
					class="close"
					src="http://112.124.50.179:8888/imgs/chaoshan/close_.png"
					mode=""
				></image>
			</view>
			<image
				v-if="img_list.length < 9"
				class="add"
				src="http://112.124.50.179:8888/imgs/chaoshan/upload.png"
				mode=""
				@click="uploadAImg"
			></image>
		</view>

		<!-- 空图 -->
		<view class="empty_img" v-if="img_list.length === 0">
			<image :src="imgUrl + 'imgs/home/img_empty.png'" mode=""></image>
			<view>暂无内容请尽快上传~</view>
		</view>
	</div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import { imgUrl } from '@/external/utils/imgUrl';
import HomeApi from '@/API/home/index.js';
import { onReady, onPageScroll, onReachBottom, onShow, onLoad } from '@dcloudio/uni-app';
const homeApi = new HomeApi();
onLoad((o) => {
	if (o.isSelf) {
		isSelf.value = JSON.parse(o.isSelf);
	}
	getList();
});
let isSelf = ref(true);
const $chooseImg = getCurrentInstance().appContext.config.globalProperties.$chooseImg;
const isEdit = ref(false);
const img_list = ref([]);
const changeStatus = () => {
	isEdit.value = !isEdit.value;
};

const uploadAImg = () => {
	$chooseImg
		.chooseImg({
			countLimit: 1,
			formData: {
				fileType: 'image',
				fileDirType: 'hall'
			}
		})
		.then((res) => {
			img_list.value = [];
			setTimeout(() => {
				uni.showLoading();
				res.forEach((ele) => {
					img_list.value.push(JSON.parse(ele.img_url.data).fileUrl);
				});
				uni.hideLoading();
				add();
			}, 500);
		});
};
const add = () => {
	homeApi
		.addHallPhotoApi({
			hallId: uni.getStorageSync('hallId'),
			imageUrl: JSON.stringify(img_list.value)
		})
		.then((res) => {
			getList();
		})
		.catch(() => {});
};
const getList = () => {
	homeApi
		.getHallPhotoListApi({
			hallId: uni.getStorageSync('hallId'),
			latestId: 0
		})
		.then((res) => {
			let arr = [];
			if (res.data.photoList != null) {
				res.data.photoList.forEach((ele) => {
					ele.imageUrl = JSON.parse(ele.imageUrl);
					ele.imageUrl.forEach((item) => {
						arr.push({
							photoId: ele.photoId,
							img: item
						});
					});
				});
				img_list.value = arr;
			} else {
				img_list.value = [];
			}
		})
		.catch(() => {});
};

const close = (id) => {
	homeApi
		.deleteHallPhotoApi({
			hallId: uni.getStorageSync('hallId'),
			imageId: id
		})
		.then((res) => {
			// add()
			getList();
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
		})
		.catch(() => {});
	//
	// img_list.value.splice(index, 1);
};
</script>

<style lang="scss">
::v-deep.u-album__row__wrapper {
	width: 216rpx !important;
	height: 216rpx !important;

	image {
		width: 100% !important;
		height: 100% !important;
	}
}

page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.content {
	background-color: #121512;
}

.edit {
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
	line-height: 32rpx;
	text-align: right;
}

.uploadImage {
	flex: 1;
	height: 96rpx;
	background: #f3e0bb;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	line-height: 32rpx;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;

	image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 8rpx;
	}
}

.edit_box {
	width: 128rpx;
	height: 96rpx;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 2rpx solid #f3e0bb;
	text-align: center;
	line-height: 96rpx;
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
}

.upload {
	display: flex;
	flex-wrap: wrap;
	margin-top: 56rpx;

	margin-right: -22rpx;

	.add {
		width: 216rpx;
		margin-right: 20rpx;
		height: 216rpx;
		margin-bottom: 16rpx;
		border-radius: 16rpx;
	}

	view {
		width: 216rpx;
		margin-right: 20rpx;
		height: 216rpx;
		margin-bottom: 16rpx;
		position: relative;

		.upload_img {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}

		.close {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			right: 0;
			top: 0;
		}
	}
}

.album {
	margin-top: 48rpx;
	margin-right: -20rpx;
	overflow: auto;
	margin-bottom: 60rpx;
}

::v-deep .u-album__row__wrapper {
	margin-right: 20rpx !important;
	margin-bottom: 16rpx !important;

	image {
		border-radius: 8rpx !important;
		width: 216rpx;
		height: 216rpx;
	}
}

.empty_img {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 10vh;
	width: 100%;
	font-weight: 400;
	font-size: 28rpx;
	color: #969da3;
	line-height: 28rpx;

	image {
		width: 460rpx;
		height: 360rpx;
		margin-bottom: 24rpx;
	}
}
</style>
